<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>第三章 React-native - 基础 | 谦谦君子</title>
  <meta name="keywords" content=" 探花交友 , 项目 ">
  <meta name="description" content="第三章 React-native - 基础 | 谦谦君子">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta property="og:type" content="website">
<meta property="og:title" content="about">
<meta property="og:url" content="https://zhanligui.gitee.io/about/index.html">
<meta property="og:site_name" content="谦谦君子">
<meta property="og:description" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-10-21T09:27:05.000Z">
<meta property="article:modified_time" content="2021-12-06T06:50:36.883Z">
<meta property="article:author" content="谦谦君子">
<meta property="article:tag" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.1.0" rel="stylesheet">

<link href="/css/hl_theme/atom-light.css?v=1.1.0" rel="stylesheet">

<link href="//cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" rel="stylesheet">

<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/js/titleTip.js?v=1.1.0" ></script>

<script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>



<script src="//cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js" ></script>

<script src="/js/iconfont.js?v=1.1.0" ></script>

<meta name="generator" content="Hexo 5.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="">
  <input class="theme_blog_path" value="">
  <input id="theme_shortcut" value="true" />
  <input id="theme_highlight_on" value="true" />
  <input id="theme_code_copy" value="true" />
</div>



<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/"
   class="avatar_target">
    <img class="avatar"
         src="/img/avatar.jpg"/>
</a>
<div class="author">
    <span>谦谦君子</span>
</div>

<div class="icon">
    
        
            <a title="rss"
               href="/atom.xml"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-rss"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="github"
               href="https://github.com/yelog"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="facebook"
               href="https://www.facebook.com/faker.tops"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-facebook"></use>
                    </svg>
                
            </a>
        
    
        
    
        
    
        
            <a title="instagram"
               href="https://www.facebook.com/faker.tops"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-instagram"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="reddit"
               href="https://www.reddit.com/user/yelog/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-reddit"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="weibo"
               href="http://weibo.com/u/2307534817"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="jianshu"
               href="https://www.jianshu.com/u/ff56736de7cf"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-jianshu"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="zhihu"
               href="https://www.zhihu.com/people/jaytp/activities"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-zhihu"></use>
                    </svg>
                
            </a>
        
    
        
    
        
            <a title="oschina"
               href="https://my.oschina.net/yelog"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-oschina"></use>
                    </svg>
                
            </a>
        
    
        
    
        
            <a title="email"
               href="mailto:jaytp@qq.com"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-email"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="qq"
               href="http://wpa.qq.com/msgrd?v=3&uin=872336115&site=qq&menu=yes"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="kugou"
               href="https://www.kugou.com/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-kugou"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="neteasemusic"
               href="https://music.163.com/#/user/home?id=88151013"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-neteasemusic"></use>
                    </svg>
                
            </a>
        
    
</div>




<ul>
    <li>
        <div class="all active" data-rel="全部文章">全部文章
            
                <small>(16)</small>
            
        </div>
    </li>
    
        
            
                <li>
                    <div data-rel="技巧">
                        
                        技巧
                        <small>(2)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="面试">
                        
                        面试
                        <small>(3)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="日记">
                        
                        日记
                        <small>(1)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="项目文档">
                        
                        项目文档
                        <small>(6)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="hexo">
                        
                        hexo
                        <small>(2)</small>
                        
                    </div>
                    
                </li>
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
        
            
            
            
    </div>
    <div>
        
            <a class="about  hasFriend  site_url"
               
               href="/about">关于</a>
        
        <a style="width: 50%"
                
                                           class="friends">友链</a>
        
    </div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="16">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="iconfont icon-left"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <div class="right-top">
        <div id="default-panel">
            <i class="iconfont icon-search" data-title="搜索 快捷键 i"></i>
            <div class="right-title">全部文章</div>
            <i class="iconfont icon-file-tree" data-title="切换到大纲视图 快捷键 w"></i>
        </div>
        <div id="search-panel">
            <i class="iconfont icon-left" data-title="返回"></i>
            <input id="local-search-input" autocomplete="off"/>
            <label class="border-line" for="input"></label>
            <i class="iconfont icon-case-sensitive" data-title="大小写敏感"></i>
            <i class="iconfont icon-tag" data-title="标签"></i>
        </div>
        <div id="outline-panel" style="display: none">
            <div class="right-title">大纲</div>
            <i class="iconfont icon-list" data-title="切换到文章列表"></i>
        </div>
    </div>

    <div class="tags-list">
    <input id="tag-search" />
    <div class="tag-wrapper">
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>技巧</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>面试</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>前端</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>日记</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>探花交友</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>项目</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>hexo</a>
            </li>
        
    </div>

</div>

    
    <nav id="title-list-nav">
        
        <a  class="全部文章 "
           href="/posts/55136.html"
           data-tag=""
           data-author="" >
            <span class="post-title" title="vue3">vue3</span>
            <span class="post-date" title="2021-12-07 10:07:53">2021/12/07</span>
        </a>
        
        <a  class="全部文章 "
           href="/posts/16107.html"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Hello World">Hello World</span>
            <span class="post-date" title="2021-12-06 14:50:36">2021/12/06</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10003.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第三章 React-native - 基础">第三章 React-native - 基础</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10002.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第二章 探花交友 - 环境搭建">第二章 探花交友 - 环境搭建</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10001.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第一章 探花交友 - Android   课程安排">第一章 探花交友 - Android   课程安排</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10000.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="探花交友-概述">探花交友-概述</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10005.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="探花交友-插件">探花交友-插件</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10004.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第四章 探花交友 - 项目接口文档">第四章 探花交友 - 项目接口文档</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 hexo "
           href="/posts/49579.html"
           data-tag="hexo"
           data-author="" >
            <span class="post-title" title="Hexo 加入字数统计 WordCount">Hexo 加入字数统计 WordCount</span>
            <span class="post-date" title="2020-11-04 17:20:29">2020/11/04</span>
        </a>
        
        <a  class="全部文章 hexo "
           href="/posts/21358.html"
           data-tag="hexo"
           data-author="" >
            <span class="post-title" title="生成永久链接(permalink) | hexo">生成永久链接(permalink) | hexo</span>
            <span class="post-date" title="2020-11-04 17:20:29">2020/11/04</span>
        </a>
        
        <a  class="全部文章 技巧 "
           href="/posts/60475.html"
           data-tag="技巧"
           data-author="" >
            <span class="post-title" title="思否免登陆复制方法">思否免登陆复制方法</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 技巧 "
           href="/posts/64216.html"
           data-tag="技巧"
           data-author="" >
            <span class="post-title" title="网页可随意编辑">网页可随意编辑</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/7266.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="数组拷贝的方法">数组拷贝的方法</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/53209.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="网络协议">网络协议</span>
            <span class="post-date" title="2020-11-02 11:08:31">2020/11/02</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/43383.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="强缓存和协商缓存">强缓存和协商缓存</span>
            <span class="post-date" title="2020-10-30 14:26:59">2020/10/30</span>
        </a>
        
        <a  class="全部文章 日记 "
           href="/posts/58040.html"
           data-tag="日记"
           data-author="" >
            <span class="post-title" title="今日来了一只不速之客">今日来了一只不速之客</span>
            <span class="post-date" title="2020-10-23 17:39:09">2020/10/23</span>
        </a>
        
        <div id="no-item-tips">

        </div>
    </nav>
    <div id="outline-list">
    </div>
</div>

    </div>
    <div class="hide-list">
        <div class="semicircle" data-title="切换全屏 快捷键 s">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div id="post">
    <div class="pjax">
        <article id="post-探花交友/basis" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">第三章 React-native - 基础</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            <i class="iconfont icon-category"></i>
            
            
            <a  data-rel="项目文档">项目文档</a>
            
        </span>
        
        
        <span class="tag">
            <i class="iconfont icon-tag"></i>
            
            <a class="color5">探花交友</a>
            
            <a class="color3">项目</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
            发布时间 : <time class="date" title='最后更新: 2021-12-06 14:50:36'>2020-11-11 11:11</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读 :<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E7%AB%A0-React-native-%E5%9F%BA%E7%A1%80"><span class="toc-text">第三章 React-native - 基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#React-Native-%E4%BB%8B%E7%BB%8D"><span class="toc-text">React Native 介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84"><span class="toc-text">文件目录结构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%80%81%E5%B8%88%E7%9A%84vs-code%E7%9A%84%E6%8F%92%E4%BB%B6"><span class="toc-text">老师的vs code的插件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JSX"><span class="toc-text">JSX</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RN%E6%A0%B7%E5%BC%8F"><span class="toc-text">RN样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#flex%E5%B8%83%E5%B1%80"><span class="toc-text">flex布局</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B7%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="toc-text">样式继承</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E4%BD%8D"><span class="toc-text">单位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%8F%E5%B9%95%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6"><span class="toc-text">屏幕宽度和高度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E6%8D%A2"><span class="toc-text">变换</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-text">标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#View"><span class="toc-text">View</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Text"><span class="toc-text">Text</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#TouchableOpacity"><span class="toc-text">TouchableOpacity</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Image"><span class="toc-text">Image</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ImageBackground"><span class="toc-text">ImageBackground</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#TextInput"><span class="toc-text">TextInput</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-text">语法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-text">插值表达式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6"><span class="toc-text">组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6"><span class="toc-text">函数组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%B1%BB%E7%BB%84%E4%BB%B6"><span class="toc-text">类组件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%8A%B6%E6%80%81-state"><span class="toc-text">状态 state</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7-props"><span class="toc-text">属性 props</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B0%83%E8%AF%95"><span class="toc-text">调试</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6"><span class="toc-text">事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-text">生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%BB%E8%A6%81%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-text">主要的生命周期</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mobx"><span class="toc-text">mobx </span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4"><span class="toc-text">使用步骤</span></a></li></ol></li></ol></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="第三章-React-native-基础"><a href="#第三章-React-native-基础" class="headerlink" title="第三章 React-native - 基础"></a><a target="_blank" rel="noopener" href="https://reactnative.cn/">第三章 React-native - 基础</a></h1><p>主要讲解以下React的基础知识,方便同学们更好的学习项目的知识。</p>
<ul>
<li>React Native 介绍</li>
<li>文件目录结构</li>
<li>JSX</li>
<li>RN样式</li>
<li>基本标签</li>
<li>插值表达式</li>
<li>调试</li>
<li>事件</li>
<li>生命周期</li>
<li>mobx</li>
</ul>
<h2 id="React-Native-介绍"><a href="#React-Native-介绍" class="headerlink" title="React Native 介绍"></a><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/react%20native/20307162?fr=aladdin">React Native 介绍</a></h2><p><img src="/friend/image-20200526120559183.png" alt="image-20200526120559183"></p>
<h2 id="文件目录结构"><a href="#文件目录结构" class="headerlink" title="文件目录结构"></a>文件目录结构</h2><pre><code class="js">│  App.js           ---   项目的根组件
│  index.js         ---   项目的入口文件     
│  package.json     ---   项目的描述文件         
│  .eslintrc.js     ---   eslint的配置文件            
│  .prettierrc.js   ---   格式化配置文件             
│  android          ---   编译安卓相关       
│  ios              ---   编译ios相关</code></pre>
<h3 id="老师的vs-code的插件"><a href="#老师的vs-code的插件" class="headerlink" title="老师的vs code的插件"></a>老师的vs code的插件</h3><p><img src="/friend/image-20200526173035552.png" alt="image-20200526173035552"></p>
<h2 id="JSX"><a href="#JSX" class="headerlink" title="JSX"></a>JSX</h2><blockquote>
<p>React中写组件的代码格式 全称是 <code>JavaScript xml</code></p>
</blockquote>
<pre><code class="jsx">import React from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;

const Index = () =&gt; &lt;View&gt;
  &lt;Text&gt;JSX&lt;/Text&gt;
&lt;/View&gt;

export default Index;</code></pre>
<h2 id="RN样式"><a href="#RN样式" class="headerlink" title="RN样式"></a>RN样式</h2><blockquote>
<p>主要讲解和web开发的不同之处</p>
</blockquote>
<ul>
<li>flex布局</li>
<li>样式继承</li>
<li>单位</li>
<li>屏幕宽度和高度</li>
<li>变换</li>
</ul>
<h3 id="flex布局"><a href="#flex布局" class="headerlink" title="flex布局"></a>flex布局</h3><ul>
<li>所有容器默认都是<code>flexbox</code></li>
<li>并且是纵向排列 也就是 <code>flex-direction:column</code></li>
</ul>
<h3 id="样式继承"><a href="#样式继承" class="headerlink" title="样式继承"></a>样式继承</h3><p>背景颜色、字体颜色、字体大小等没有继承</p>
<h3 id="单位"><a href="#单位" class="headerlink" title="单位"></a>单位</h3><ul>
<li>不能加 <code>px</code> 单位 </li>
<li>不能加 <code>vw vh</code> 等单位</li>
<li>可以加百分比单位</li>
</ul>
<h3 id="屏幕宽度和高度"><a href="#屏幕宽度和高度" class="headerlink" title="屏幕宽度和高度"></a><a target="_blank" rel="noopener" href="https://reactnative.cn/docs/dimensions#__docusaurus">屏幕宽度和高度</a></h3><pre><code class="jsx">import &#123;Dimensions &#125; from &quot;react-native&quot;;
const screenWidth = Math.round(Dimensions.get(&#39;window&#39;).width);
const screenHeight = Math.round(Dimensions.get(&#39;window&#39;).height);</code></pre>
<h3 id="变换"><a href="#变换" class="headerlink" title="变换"></a>变换</h3><pre><code class="jsx">&lt;Text style=&#123;&#123;transform:[&#123;translateY:300&#125;,&#123;scale:2&#125;]&#125;&#125;&gt;变换&lt;/Text&gt;</code></pre>
<h2 id="标签"><a href="#标签" class="headerlink" title="标签"></a><a target="_blank" rel="noopener" href="https://reactnative.cn/docs/activityindicator">标签</a></h2><ol>
<li><p>View</p>
</li>
<li><p>Text</p>
</li>
<li><p>TouchableOpacity </p>
</li>
<li><p>Image</p>
</li>
<li><p>ImageBackground</p>
</li>
<li><p>TextInput</p>
</li>
<li><p>其他</p>
<ol>
<li>button</li>
<li>FlatList</li>
<li>ScrollView</li>
<li>StatusBar</li>
<li>TextInput</li>
</ol>
</li>
</ol>
<h3 id="View"><a href="#View" class="headerlink" title="View"></a>View</h3><ul>
<li>相当于以前<code>web</code>中的div</li>
<li>不支持设置字体大小,字体颜色等</li>
<li>不能直接放文本内容</li>
<li>不支持直接绑定点击事件 (一般使用 <code>TouchableOpacity</code>  来代替)</li>
</ul>
<h3 id="Text"><a href="#Text" class="headerlink" title="Text"></a>Text</h3><blockquote>
<p>文本标签</p>
</blockquote>
<ul>
<li>文本标签 可以设置字体颜色、大小等</li>
<li>支持绑定点击事件</li>
</ul>
<h3 id="TouchableOpacity"><a href="#TouchableOpacity" class="headerlink" title="TouchableOpacity"></a>TouchableOpacity</h3><blockquote>
<p>可以绑定点击事件的块级标签</p>
</blockquote>
<ul>
<li>相当于块级的容器</li>
<li>支持绑定点击事件 <code>onPress</code></li>
<li>可以设置点击时的透明度  </li>
</ul>
<pre><code class="jsx">&lt;TouchableOpacity  activeOpacity=&#123;0.5&#125;  onPress=&#123;this.handleOnPress&#125; &gt;&lt;/TouchableOpacity&gt;</code></pre>
<h3 id="Image"><a href="#Image" class="headerlink" title="Image"></a>Image</h3><blockquote>
<p>图片标签</p>
</blockquote>
<ul>
<li><p>渲染本地图片时</p>
<pre><code class="jsx">&lt;Image source=&#123;require(&quot;../girl.png&quot;)&#125;  /&gt;</code></pre>
</li>
<li><p>渲染网络图片时,必须加入宽度和高度</p>
<pre><code class="jsx">&lt;Image source=&#123;&#123;uri:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590514654506&di=38fa919d4c78fb776536b922bb94eec3&imgtype=0&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2013%2F03%2F28%2F927_xgzwl%2520%25281%2529.jpg"&#125;&#125; style=&#123;&#123;width:200,height:300&#125;&#125;  /&gt;</code></pre>
</li>
<li><p>在 Android 上支持 GIF 和 WebP 格式图片</p>
<p>默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在<code>android/app/build.gradle</code>文件中根据需要手动添加以下模块：</p>
<pre><code class="jsx">dependencies &#123;
  // 如果你需要支持Android4.0(API level 14)之前的版本
  implementation &#39;com.facebook.fresco:animated-base-support:1.3.0&#39;

  // 如果你需要支持GIF动图
  implementation &#39;com.facebook.fresco:animated-gif:2.0.0&#39;

  // 如果你需要支持WebP格式，包括WebP动图
  implementation &#39;com.facebook.fresco:animated-webp:2.1.0&#39;
  implementation &#39;com.facebook.fresco:webpsupport:2.0.0&#39;

  // 如果只需要支持WebP格式而不需要动图
  implementation &#39;com.facebook.fresco:webpsupport:2.0.0&#39;
&#125;</code></pre>
</li>
</ul>
<h3 id="ImageBackground"><a href="#ImageBackground" class="headerlink" title="ImageBackground"></a>ImageBackground</h3><blockquote>
<p>一个可以使用图片当作背景的容器,相当于以前的 <code>div+背景图片</code></p>
</blockquote>
<pre><code class="jsx">  &lt;ImageBackground source=&#123;...&#125; style=&#123;&#123;width: '100%', height: '100%'&#125;&#125;&gt;
    &lt;Text&gt;Inside&lt;/Text&gt;
  &lt;/ImageBackground&gt;</code></pre>
<h3 id="TextInput"><a href="#TextInput" class="headerlink" title="TextInput"></a>TextInput</h3><blockquote>
<p>输入框组件</p>
</blockquote>
<ul>
<li>可以通过 <code>onChangeText</code>事件来获取输入框的值</li>
</ul>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><ol>
<li><p>插值表达式</p>
</li>
<li><p>组件</p>
</li>
<li><p>状态 state</p>
</li>
<li><p>属性 props</p>
</li>
<li><p>调试</p>
</li>
<li><p>事件</p>
</li>
<li><p>生命周期</p>
</li>
</ol>
<h3 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h3><pre><code class="jsx">import React from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;

const Index = () =&gt; &lt;View&gt;
  &lt;Text&gt;&#123;&quot;开心&quot;&#125;&lt;/Text&gt;
  &lt;Text&gt;&#123;123&#125;&lt;/Text&gt;
&lt;/View&gt;

export default Index;</code></pre>
<h3 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h3><ul>
<li>函数组件<ul>
<li>没有state (通过hooks可以有)</li>
<li>没有生命周期(通过hooks可以有)</li>
<li>适合简单的场景</li>
</ul>
</li>
<li>类组件<ul>
<li>适合复杂的场景</li>
<li>有state</li>
<li>有生命周期</li>
</ul>
</li>
</ul>
<h4 id="函数组件"><a href="#函数组件" class="headerlink" title="函数组件"></a>函数组件</h4><pre><code class="jsx">class Index extends Component &#123;
  render() &#123;
    return (
      &lt;View&gt;
        &lt;Btn&gt;&lt;/Btn&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;
// 函数组件
const Btn = () =&gt; &lt;Button title=&quot;点我&quot; /&gt;</code></pre>
<h4 id="类组件"><a href="#类组件" class="headerlink" title="类组件"></a>类组件</h4><pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;
class Index extends Component &#123;
  render() &#123;
    return (
      &lt;View&gt;
        &lt;Text&gt;类组件&lt;/Text&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;
export default Index;</code></pre>
<h3 id="状态-state"><a href="#状态-state" class="headerlink" title="状态 state"></a>状态 state</h3><pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;
class Index extends Component &#123;
  // 1 声明state
  state = &#123;
    num: 100
  &#125;
  render() &#123;
    return (
      &lt;View&gt;
        &#123;/* 2 使用state */&#125;
        &lt;Text onPress=&#123;this.handlePress&#125; &gt;&#123;this.state.num&#125;&lt;/Text&gt;
      &lt;/View&gt;
    );
  &#125;
  // 3 修改state
  handlePress = () =&gt; &#123;
    this.setState(&#123; num: 1010 &#125;);
  &#125;
&#125;
export default Index;</code></pre>
<h3 id="属性-props"><a href="#属性-props" class="headerlink" title="属性 props"></a>属性 props</h3><blockquote>
<p>父子传递数据的关键</p>
</blockquote>
<pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;
class Index extends Component &#123;
  render() &#123;
    return (
      &lt;View&gt;
        &lt;BigText fontColor=&quot;red&quot; &gt;大博妞&lt;/BigText&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;

class BigText extends Component &#123;
  render() &#123;
    // 通过props来接收父组件传递的数据
    return &lt;Text style=&#123;&#123; color: this.props.fontColor &#125;&#125; &gt;
      &#123;/*  children 其实就是插槽 类似vue中的slot  */&#125;
      &#123;this.props.children&#125;
    &lt;/Text&gt;
  &#125;
&#125;


export default Index;</code></pre>
<h3 id="调试"><a href="#调试" class="headerlink" title="调试"></a>调试</h3><p>分为两种方式</p>
<ol start="2">
<li><p>使用谷歌浏览器来调试</p>
<ol>
<li>使用谷歌浏览器即可</li>
<li>不能查看标签结构</li>
<li>不能查看网络请求</li>
</ol>
</li>
<li><p>使用rn推荐的工具 <a target="_blank" rel="noopener" href="https://github.com/jhen0409/react-native-debugger">react-native-debugger</a>来调试 (<strong>老师推荐使用这种方式</strong>)</p>
<ol>
<li>可以查看标签结构</li>
<li>不能查看网络请求</li>
</ol>
</li>
<li><p>想要查看网络请求</p>
<ol>
<li><p>找到项目的入口文件 <code>index.js</code></p>
</li>
<li><p>加入以下代码即可</p>
<pre><code class="js">GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest</code></pre>
</li>
</ol>
</li>
</ol>
<h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><p>绑定时间需要特别注意 this的指向问题,可以总结为如下的方式</p>
<ul>
<li>使用箭头函数</li>
<li>通过bind重新绑定this</li>
<li>匿名函数</li>
</ul>
<pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;
class Index extends Component &#123;
  state = &#123; num: 100 &#125;
  // 丢失 state
  handlePress1() &#123;
    console.log(this.state);
  &#125;
  // 正常
  handlePress2 = () =&gt; &#123;
    console.log(this.state);
  &#125;
  // 正常
  handlePress3() &#123;
    console.log(this.state);
  &#125;
  // 正常
  handlePress4() &#123;
    console.log(this.state);
  &#125;
  // 正常
  render() &#123;
    return (
      &lt;View&gt;
        &#123;/* 导致事件函数中获取不到state */&#125;
        &lt;Text onPress=&#123;this.handlePress1&#125; &gt;事件1&lt;/Text&gt;
        &#123;/* 正常 */&#125;
        &lt;Text onPress=&#123;this.handlePress2&#125; &gt;事件1&lt;/Text&gt;
        &#123;/* 正常 */&#125;
        &lt;Text onPress=&#123;this.handlePress3.bind(this)&#125; &gt;事件3&lt;/Text&gt;
        &#123;/* 正常 */&#125;
        &lt;Text onPress=&#123;() =&gt; this.handlePress4()&#125; &gt;事件4&lt;/Text&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;
export default Index;</code></pre>
<hr>
<h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a><a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/react-component.html#mounting">生命周期</a></h3><blockquote>
<p>生命周期指的<code>react组件</code>的从创建到销毁的整个过程中会自动触发的函数</p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/">在线图示</a></p>
<p><img src="/friend/image-20200528103625667.png" alt="image-20200528103625667"></p>
<h4 id="主要的生命周期"><a href="#主要的生命周期" class="headerlink" title="主要的生命周期"></a>主要的生命周期</h4><ul>
<li><p><em>constructor</em></p>
<ul>
<li>组件被实例化的时候出发 一般用做对组件做初始工作,如设置<code>state</code>等</li>
</ul>
</li>
<li><p>render</p>
<ul>
<li>组件开始渲染时触发</li>
<li>组件被更新时触发 -  state和props发生改变时触发</li>
</ul>
</li>
<li><p>componentDidMount</p>
<ul>
<li>组件挂载完毕,可以发送异步请求获取数据</li>
</ul>
</li>
<li><p>componentWillUnmount</p>
<ul>
<li>组件被卸载时触发</li>
<li>一般用在清除定时器或者取消订阅等</li>
</ul>
</li>
</ul>
<hr>
<h2 id="mobx"><a href="#mobx" class="headerlink" title="mobx "></a><a target="_blank" rel="noopener" href="https://mobx.js.org/README.html">mobx </a></h2><blockquote>
<p>react中 全局数据管理库  可以简单的实现数据的跨组件共享 类似 vue中的vuex</p>
</blockquote>
<p><img src="/friend/flow.png" alt="img"></p>
<h3 id="使用步骤"><a href="#使用步骤" class="headerlink" title="使用步骤"></a>使用步骤</h3><ol>
<li><p>安装依赖</p>
<ul>
<li><code>mobx</code> 核心库</li>
<li><code>mobx-react</code> 方便在react中使用mobx技术的库</li>
<li><code>@babel/plugin-proposal-decorators</code> 让 <code>rn</code> 项目支持 <code>es7</code> 的装饰器语法的库</li>
</ul>
<pre><code class="js">yarn add mobx mobx-react @babel/plugin-proposal-decorators</code></pre>
</li>
<li><p>在 <code>babel.config.js</code>添加以下配置</p>
<pre><code class="js">  plugins: [
    [&#39;@babel/plugin-proposal-decorators&#39;, &#123; &#39;legacy&#39;: true &#125;]
  ]</code></pre>
</li>
<li><p>新建文件 <code>mobx\index.js</code> 用来存放 全局数据 </p>
<pre><code class="js">import &#123; observable, action &#125; from &quot;mobx&quot;;

class RootStore &#123;
  // observable 表示数据可监控 表示是全局数据
  @observable name = &quot;hello&quot;;
  // action行为 表示 changeName是个可以修改全局共享数据的方法
  @action changeName(name) &#123;
    this.name = name;
  &#125;
&#125;

export default new RootStore();</code></pre>
</li>
<li><p>在根组件中挂载</p>
<blockquote>
<p>通过 <code>Provider</code> 来挂载和传递</p>
</blockquote>
<pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View&#125; from &#39;react-native&#39;;
import rootStore from &quot;./mobx&quot;;
import &#123; Provider&#125; from &quot;mobx-react&quot;;
class Index extends Component &#123;
  // 正常
  render() &#123;
    return (
      &lt;View  &gt;
        &lt;Provider rootStore=&#123;rootStore&#125; &gt;
          &lt;Sub1&gt;&lt;/Sub1&gt;
        &lt;/Provider&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;</code></pre>
</li>
<li><p>其他组件中使用</p>
<pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;
import &#123;inject,observer &#125; from &quot;mobx-react&quot;;

@inject(&quot;rootStore&quot;) // 注入 用来获取 全局数据的
@observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
class Sub1 extends Component &#123;
  changeName = () =&gt; &#123;
   // 修改全局数据   
    this.props.rootStore.changeName(Date.now());
  &#125;
  render() &#123;
    console.log(this);
    return (
      &lt;View&gt;&lt;Text onPress=&#123;this.changeName&#125;&gt;&#123;this.props.rootStore.name&#125;&lt;/Text&gt;&lt;/View&gt;
    );
  &#125;
&#125;

export default Index;</code></pre>
</li>
</ol>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>






    




    </div>
    <div class="copyright">
        <p class="footer-entry">
    ©2016-2020 Yelog
</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full" data-title="切换全屏 快捷键 s"><span class="min "></span></button>
<a class="" id="rocket" ></a>

    </div>
</div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.1.0" ></script>

<script src="/js/script.js?v=1.1.0" ></script>
<script>
    var img_resize = 'default';
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $("#post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    

    
</style>







</html>
